<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>趣味学习小程序</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Comic Sans MS', '楷体', sans-serif;
            -webkit-text-size-adjust: none;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            min-height: 100vh;
            padding: 10px;
            -webkit-overflow-scrolling: touch;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            min-height: 100vh;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        
        .user-switch {
            display: flex;
            gap: 10px;
        }
        
        .user-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 15px;
            background-color: #ffcc00;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
        }
        
        .user-btn.active {
            background-color: #ff9900;
            box-shadow: 0 0 15px #ffcc00, 0 0 25px #ff9900;
            animation: glow 1.5s infinite alternate;
        }
        
        @keyframes glow {
            from {
                box-shadow: 0 0 10px #ffcc00, 0 0 20px #ff9900;
            }
            to {
                box-shadow: 0 0 15px #ffcc00, 0 0 30px #ff9900;
            }
        }
        
        .nav-bar {
            display: flex;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 20px;
            overflow: hidden;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .nav-item {
            flex: 1;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            border-bottom: 3px solid transparent;
        }
        
        .nav-item.active {
            background-color: #ffcc00;
            border-bottom: 3px solid #ff9900;
        }
        
        .content {
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            min-height: 500px;
        }
        
        .section {
            display: none;
        }
        
        .section.active {
            display: block;
        }
        
        .coins-display, .exp-display {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding: 10px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        }
        
        .coin-icon, .exp-icon {
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }
        
        .coin-icon {
            background-color: gold;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #b8860b;
        }
        
        .exp-icon {
            background-color: #4CAF50;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
        }
        
        .progress-bar {
            height: 20px;
            background-color: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
            margin: 10px 0;
            position: relative;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
            border-radius: 10px;
            transition: width 0.5s;
        }
        
        .progress-text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #333;
        }
        
        .game-area {
            border: 3px dashed #ff9900;
            border-radius: 15px;
            padding: 20px;
            margin: 20px 0;
            min-height: 300px;
            background-color: rgba(255, 255, 255, 0.7);
        }
        
        .game-controls {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .control-btn {
            padding: 10px 15px;
            border: none;
            border-radius: 10px;
            background-color: #4CAF50;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .control-btn:hover {
            background-color: #45a049;
            transform: translateY(-2px);
        }
        
        .hint-btn {
            background-color: #ff9800;
        }
        
        .hint-btn:hover {
            background-color: #e68900;
        }
        
        .road {
            position: relative;
            height: 200px;
            background-color: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
            margin: 20px 0;
        }
        
        .road-path {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 20px;
            background-color: #8BC34A;
            transform: translateY(-50%);
        }
        
        .checkpoint {
            position: absolute;
            top: 50%;
            width: 30px;
            height: 30px;
            background-color: #ff9800;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 15px;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            text-align: center;
        }
        
        .modal-title {
            font-size: 24px;
            margin-bottom: 15px;
            color: #ff6600;
        }
        
        .option-btn {
            display: block;
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: none;
            border-radius: 10px;
            background-color: #f0f0f0;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .option-btn:hover {
            background-color: #e0e0e0;
        }
        
        .option-btn.correct {
            background-color: #4CAF50;
            color: white;
        }
        
        .option-btn.incorrect {
            background-color: #f44336;
            color: white;
        }
        
        .achievement-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        
        .achievement-item {
            background-color: white;
            border-radius: 15px;
            padding: 15px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        
        .achievement-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 10px;
            background-color: #ffcc00;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        
        .achievement-title {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .achievement-desc {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }
        
        .achievement-reward {
            font-size: 14px;
            color: #4CAF50;
            font-weight: bold;
        }
        
        .achievement-locked {
            opacity: 0.5;
        }
        
        .store-item {
            display: flex;
            align-items: center;
            background-color: white;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        }
        
        .store-icon {
            width: 60px;
            height: 60px;
            margin-right: 15px;
            border-radius: 10px;
            background-color: #ffcc00;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        
        .store-details {
            flex: 1;
        }
        
        .store-title {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .store-desc {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }
        
        .store-price {
            font-weight: bold;
            color: #ff6600;
        }
        
        .buy-btn {
            padding: 8px 15px;
            border: none;
            border-radius: 10px;
            background-color: #4CAF50;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
        
        .settings-content {
            line-height: 1.6;
        }
        
        .settings-section {
            margin-bottom: 20px;
        }
        
        .settings-title {
            font-size: 20px;
            margin-bottom: 10px;
            color: #ff6600;
        }
        
        .admin-controls {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
        
        .admin-input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            flex: 1;
        }
        
        .admin-btn {
            padding: 8px 15px;
            border: none;
            border-radius: 5px;
            background-color: #2196F3;
            color: white;
            cursor: pointer;
        }
        
        /* Safari特定修复 */
        @supports (-webkit-touch-callout: none) {
            body {
                height: 100vh;
                height: -webkit-fill-available;
            }
            
            .container {
                min-height: 100vh;
                min-height: -webkit-fill-available;
            }
        }
        
        /* 修复Safari中的按钮样式 */
        button, select {
            -webkit-appearance: none;
            border-radius: 15px;
        }
        
        @media (max-width: 768px) {
            .nav-bar {
                flex-wrap: wrap;
            }
            
            .nav-item {
                flex: 1 0 33.33%;
            }
            
            .achievement-list {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>趣味学习小程序</h1>
            <div class="user-switch">
                <button class="user-btn active" id="user-mumu">莯莯</button>
                <button class="user-btn" id="user-ranran">然然</button>
            </div>
        </div>
        
        <div class="nav-bar">
            <div class="nav-item active" data-section="overview">总览</div>
            <div class="nav-item" data-section="english">英语之路</div>
            <div class="nav-item" data-section="math">奥数历练</div>
            <div class="nav-item" data-section="achievements">成就</div>
            <div class="nav-item" data-section="store">商店</div>
            <div class="nav-item" data-section="settings">设置</div>
        </div>
        
        <div class="content">
            <!-- 总览部分 -->
            <div class="section active" id="overview">
                <h2>总览</h2>
                <div class="coins-display">
                    <div class="coin-icon">💰</div>
                    <div>
                        <div>金币: <span id="total-coins">0</span></div>
                        <div class="admin-controls">
                            <input type="number" class="admin-input" id="coin-change" placeholder="金币变化量">
                            <button class="admin-btn" id="add-coins">增加金币</button>
                            <button class="admin-btn" id="remove-coins">减少金币</button>
                        </div>
                    </div>
                </div>
                <div class="coins-display">
                    <div class="coin-icon">🏆</div>
                    <div>
                        <div>积分: <span id="total-points">0</span></div>
                        <div class="admin-controls">
                            <input type="number" class="admin-input" id="point-change" placeholder="积分变化量">
                            <button class="admin-btn" id="add-points">增加积分</button>
                            <button class="admin-btn" id="remove-points">减少积分</button>
                        </div>
                    </div>
                </div>
                
                <div class="game-details">
                    <h3>英语之路</h3>
                    <div class="coins-display">
                        <div class="coin-icon">💰</div>
                        <div>金币: <span id="english-coins">0</span></div>
                    </div>
                    <div class="exp-display">
                        <div class="exp-icon">📈</div>
                        <div>
                            <div>等级: <span id="english-level">1</span></div>
                            <div class="progress-bar">
                                <div class="progress-fill" id="english-progress" style="width: 0%"></div>
                                <div class="progress-text" id="english-progress-text">0/100</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="game-details">
                    <h3>奥数历练</h3>
                    <div class="coins-display">
                        <div class="coin-icon">💰</div>
                        <div>金币: <span id="math-coins">0</span></div>
                    </div>
                    <div class="exp-display">
                        <div class="exp-icon">📈</div>
                        <div>
                            <div>等级: <span id="math-level">1</span></div>
                            <div class="progress-bar">
                                <div class="progress-fill" id="math-progress" style="width: 0%"></div>
                                <div class="progress-text" id="math-progress-text">0/100</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 英语之路部分 -->
            <div class="section" id="english">
                <h2>英语之路</h2>
                <div class="game-controls">
                    <button class="control-btn" id="new-english-game">新游戏</button>
                    <button class="control-btn hint-btn" id="english-hint">提示 (消耗2金币)</button>
                </div>
                
                <div class="game-area" id="english-game-area">
                    <div class="road" id="english-road">
                        <!-- 道路和关卡将通过JavaScript动态生成 -->
                    </div>
                </div>
                
                <div class="coins-display">
                    <div class="coin-icon">💰</div>
                    <div>金币: <span id="english-game-coins">0</span></div>
                </div>
                <div class="exp-display">
                    <div class="exp-icon">📈</div>
                    <div>
                        <div>等级: <span id="english-game-level">1</span></div>
                        <div class="progress-bar">
                            <div class="progress-fill" id="english-game-progress" style="width: 0%"></div>
                            <div class="progress-text" id="english-game-progress-text">0/100</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 奥数历练部分 -->
            <div class="section" id="math">
                <h2>奥数历练</h2>
                <div class="game-controls">
                    <select id="grade-select">
                        <option value="二年级">二年级</option>
                        <option value="三年级">三年级</option>
                        <option value="四年级">四年级</option>
                    </select>
                    <button class="control-btn" id="new-math-game">开始选题</button>
                    <button class="control-btn hint-btn" id="math-hint">提示 (消耗4金币)</button>
                </div>
                
                <div class="game-area" id="math-game-area">
                    <!-- 题目和选项将通过JavaScript动态生成 -->
                </div>
                
                <div class="coins-display">
                    <div class="coin-icon">💰</div>
                    <div>金币: <span id="math-game-coins">0</span></div>
                </div>
                <div class="exp-display">
                    <div class="exp-icon">📈</div>
                    <div>
                        <div>等级: <span id="math-game-level">1</span></div>
                        <div class="progress-bar">
                            <div class="progress-fill" id="math-game-progress" style="width: 0%"></div>
                            <div class="progress-text" id="math-game-progress-text">0/100</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 成就部分 -->
            <div class="section" id="achievements">
                <h2>成就</h2>
                <div class="achievement-list" id="achievement-list">
                    <!-- 成就将通过JavaScript动态生成 -->
                </div>
            </div>
            
            <!-- 商店部分 -->
            <div class="section" id="store">
                <h2>商店</h2>
                <div class="store-item">
                    <div class="store-icon">💱</div>
                    <div class="store-details">
                        <div class="store-title">金币兑换积分</div>
                        <div class="store-desc">100金币兑换1积分</div>
                        <div class="store-price">100金币</div>
                    </div>
                    <button class="buy-btn" data-exchange="100">兑换</button>
                </div>
                <div class="store-item">
                    <div class="store-icon">💱</div>
                    <div class="store-details">
                        <div class="store-title">金币兑换积分</div>
                        <div class="store-desc">1000金币兑换12积分</div>
                        <div class="store-price">1000金币</div>
                    </div>
                    <button class="buy-btn" data-exchange="1000">兑换</button>
                </div>
                <div class="store-item">
                    <div class="store-icon">💱</div>
                    <div class="store-details">
                        <div class="store-title">金币兑换积分</div>
                        <div class="store-desc">10000金币兑换150积分</div>
                        <div class="store-price">10000金币</div>
                    </div>
                    <button class="buy-btn" data-exchange="10000">兑换</button>
                </div>
                <div class="store-item">
                    <div class="store-icon">🍲</div>
                    <div class="store-details">
                        <div class="store-title">自选大餐</div>
                        <div class="store-desc">火锅或烧烤大餐</div>
                        <div class="store-price">5000金币</div>
                    </div>
                    <button class="buy-btn" data-item="meal">购买</button>
                </div>
                <div class="store-item">
                    <div class="store-icon">🛀</div>
                    <div class="store-details">
                        <div class="store-title">娱乐休闲</div>
                        <div class="store-desc">放松身心，享受生活</div>
                        <div class="store-price">10000金币</div>
                    </div>
                    <button class="buy-btn" data-item="leisure">购买</button>
                </div>
            </div>
            
            <!-- 设置部分 -->
            <div class="section" id="settings">
                <h2>设置</h2>
                <div class="settings-content">
                    <div class="settings-section">
                        <h3 class="settings-title">游戏规则说明</h3>
                        <p>1. 本系统为莯莯和然然两位小朋友设计，所有数据独立保存。</p>
                        <p>2. 英语之路：通过完成单词关卡获得金币和经验值，每级所需经验值翻倍。</p>
                        <p>3. 奥数历练：根据年级选择题目，答对获得金币和经验值，奖励随年级提高。</p>
                        <p>4. 成就系统：完成特定任务解锁成就，获得额外奖励。</p>
                        <p>5. 商店：使用金币兑换积分或购买特殊物品。</p>
                        <p>6. 所有数据会在浏览器中保存，下次登录时可继续游戏。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 模态框 -->
    <div class="modal" id="password-modal">
        <div class="modal-content">
            <h3 class="modal-title">管理员验证</h3>
            <p>请输入管理员密码:</p>
            <input type="password" id="admin-password" class="admin-input" style="width: 100%; margin: 10px 0;">
            <div style="display: flex; gap: 10px;">
                <button class="control-btn" id="confirm-password">确认</button>
                <button class="control-btn hint-btn" id="cancel-password">取消</button>
            </div>
        </div>
    </div>
    
    <!-- 英语游戏模态框 -->
    <div class="modal" id="english-modal">
        <div class="modal-content">
            <h3 class="modal-title" id="english-modal-title">单词挑战</h3>
            <p id="english-question"></p>
            <div id="english-options">
                <!-- 选项将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>
    
    <!-- 数学游戏模态框 -->
    <div class="modal" id="math-modal">
        <div class="modal-content">
            <h3 class="modal-title" id="math-modal-title">数学挑战</h3>
            <p id="math-question"></p>
            <div id="math-options">
                <!-- 选项将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>
    
    <!-- 结果模态框 -->
    <div class="modal" id="result-modal">
        <div class="modal-content">
            <h3 class="modal-title" id="result-title">太厉害了！</h3>
            <p id="result-message"></p>
            <div style="display: flex; gap: 10px; margin-top: 15px;">
                <button class="control-btn" id="next-question" style="display: none;">下一道题</button>
                <button class="control-btn hint-btn" id="close-result">关闭</button>
            </div>
        </div>
    </div>
    
    <script>
        // 数据存储和管理
        class UserData {
            constructor(name) {
                this.name = name;
                this.totalCoins = 0;
                this.totalPoints = 0;
                
                // 英语之路数据
                this.english = {
                    coins: 0,
                    level: 1,
                    exp: 0,
                    expNeeded: 100,
                    completedRoads: 0,
                    perfectRoads: 0,
                    wrongAnswers: 0
                };
                
                // 奥数历练数据
                this.math = {
                    coins: 0,
                    level: 1,
                    exp: 0,
                    expNeeded: 100,
                    completedQuestions: 0
                };
                
                // 成就数据
                this.achievements = {
                    roadCrusher: false,
                    wordMaster: false,
                    financialFreedom: false,
                    poorLearning: false,
                    englishLevel10: false,
                    englishLevel20: false,
                    mathBeginner: false,
                    mathPromising: false,
                    mathEmerging: false,
                    mathOutstanding: false,
                    mathPeak: false,
                    mathUnfathomable: false,
                    mathPrince: false,
                    mathMaster: false
                };
            }
            
            // 保存数据到本地存储
            save() {
                try {
                    localStorage.setItem(`userData_${this.name}`, JSON.stringify(this));
                } catch (e) {
                    console.warn('Failed to save to localStorage:', e);
                }
            }
            
            // 从本地存储加载数据
            static load(name) {
                const data = localStorage.getItem(`userData_${name}`);
                if (data) {
                    const parsed = JSON.parse(data);
                    const userData = new UserData(name);
                    Object.assign(userData, parsed);
                    return userData;
                }
                return new UserData(name);
            }
        }
        
        // 单词库
        const wordLibrary = [
            { word: "plate", pronunciation: "[plet]", translation: "盘子" },
            { word: "flower", pronunciation: "[ˈflaʊɚ]", translation: "花" },
            { word: "play", pronunciation: "[ple]", translation: "游玩" },
            { word: "fly", pronunciation: "[flaɪ]", translation: "苍蝇；飞" },
            { word: "please", pronunciation: "[pliz]", translation: "请" },
            { word: "foot", pronunciation: "[fʊt]", translation: "脚" },
            { word: "point", pronunciation: "[pɔɪnt]", translation: "指向；为" },
            { word: "for", pronunciation: "[fɔr]", translation: "为；向" },
            { word: "push", pronunciation: "[pʊʃ]", translation: "推" },
            { word: "queen", pronunciation: "[kwin]", translation: "女王；皇后" },
            { word: "girl", pronunciation: "[ɡɝl]", translation: "女孩" },
            { word: "give", pronunciation: "[ɡɪv]", translation: "给" },
            { word: "radio", pronunciation: "[ˈredio]", translation: "收音机" },
            { word: "glass", pronunciation: "[ɡlæs]", translation: "玻璃杯" },
            { word: "raise", pronunciation: "[rez]", translation: "举起" },
            { word: "go", pronunciation: "[ɡo]", translation: "去" },
            { word: "read", pronunciation: "[rid]", translation: "阅读" },
            { word: "good", pronunciation: "[ɡʊd]", translation: "好的" },
            { word: "ready", pronunciation: "[ˈrɛdi]", translation: "已预备好的" },
            { word: "good-bye", pronunciation: "[ˌɡʊdˈbaɪ]", translation: "再见" }
        ];
        
        // 数学题库
        const mathLibrary = {
            "二年级": [
                { question: "笼子里有鸡和兔共10只，腿共有28条，问鸡和兔各有多少只？", options: ["鸡6只，兔4只", "鸡5只，兔5只", "鸡4只，兔6只"], answer: 0 },
                { question: "鸡和兔关在同一个笼子里，共有头12个，脚34只，问鸡和兔各有多少只？", options: ["鸡7只，兔5只", "鸡6只，兔6只", "鸡5只，兔7只"], answer: 0 },
                { question: "在一条20米长的道路一边植树，每隔5米植一棵，两端都植，一共需要植多少棵树？", options: ["4棵", "5棵", "6棵"], answer: 1 },
                { question: "小明从1楼走到3楼需要2分钟，照这样计算，他从1楼走到6楼需要多少分钟？", options: ["4分钟", "5分钟", "6分钟"], answer: 1 }
            ],
            "三年级": [
                { question: "笼子里有鸡和兔共35只，腿共有94条，问鸡和兔各有多少只？", options: ["鸡23只，兔12只", "鸡22只，兔13只", "鸡24只，兔11只"], answer: 0 },
                { question: "鸡兔同笼，共有头45个，脚126只，鸡兔各多少只？", options: ["鸡27只，兔18只", "鸡26只，兔19只", "鸡28只，兔17只"], answer: 0 },
                { question: "在一条60米长的道路一边植树，每隔4米植一棵，两端都植，一共需要植多少棵树？", options: ["15棵", "16棵", "17棵"], answer: 1 },
                { question: "小明从1楼走到4楼需要3分钟，照这样计算，他从1楼走到10楼需要多少分钟？", options: ["8分钟", "9分钟", "10分钟"], answer: 1 }
            ],
            "四年级": [
                { question: "小明期末考试语文92分，数学98分，英语95分，他的平均分是多少？", options: ["94分", "95分", "96分"], answer: 1 },
                { question: "五个数的平均数是28，前三个数的平均数是25，后三个数的平均数是30，第三个数是多少？", options: ["28", "29", "30"], answer: 1 },
                { question: "3台拖拉机4小时耕地120亩，照这样计算，5台拖拉机6小时耕地多少亩？", options: ["280亩", "300亩", "320亩"], answer: 1 },
                { question: "5个人6天可以植树300棵，照这样计算，8个人10天可以植树多少棵？", options: ["700棵", "800棵", "900棵"], answer: 1 }
            ]
        };
        
        // 成就列表
        const achievementsList = [
            { id: "roadCrusher", title: "道路碾压者", description: "在英语之路中累计完成道路闯关50条达成", reward: "金币50，经验200", type: "english" },
            { id: "wordMaster", title: "单词王新秀", description: "在英语之路中一条完整道路通关，没有出现差错、没有使用提示达成", reward: "金币10，经验100", type: "english" },
            { id: "financialFreedom", title: "财务自由者", description: "在英语之路和奥数历练中累计获得金币10000达成", reward: "金币50，经验200", type: "both" },
            { id: "poorLearning", title: "我没好好学", description: "在英语之路中同一条道路闯关过程中错5道题达成", reward: "扣除金币10", type: "english" },
            { id: "englishLevel10", title: "英语十级", description: "在英语之路中级别达到10级后达成", reward: "金币50，经验200", type: "english" },
            { id: "englishLevel20", title: "英语二十级", description: "在英语之路中级别达到20级后达成", reward: "金币500", type: "english" },
            { id: "mathBeginner", title: "小试牛刀", description: "在奥数历练中累计完成题目10道达成", reward: "金币20，经验200", type: "math" },
            { id: "mathPromising", title: "初露锋芒", description: "在奥数历练中累计完成题目30道达成", reward: "金币20，经验200", type: "math" },
            { id: "mathEmerging", title: "崭露头角", description: "在奥数历练中累计完成题目50道达成", reward: "金币50，经验500", type: "math" },
            { id: "mathOutstanding", title: "出类拔萃", description: "在奥数历练中累计完成题目100道达成", reward: "金币100，经验1000", type: "math" }
        ];
        
        // 应用状态
        let currentUser = "莯莯";
        let userData = UserData.load(currentUser);
        let currentEnglishGame = null;
        let currentMathGame = null;
        let pendingAdminAction = null;
        
        // DOM 元素
        const userButtons = {
            mumu: document.getElementById('user-mumu'),
            ranran: document.getElementById('user-ranran')
        };
        
        const navItems = document.querySelectorAll('.nav-item');
        const sections = document.querySelectorAll('.section');
        
        // 初始化应用
        function initApp() {
            // 加载用户数据
            loadUserData();
            
            // 设置事件监听器
            setupEventListeners();
            
            // 初始化游戏区域
            initEnglishGame();
            initMathGame();
            
            // 更新UI
            updateUI();
        }
        
        // 加载用户数据
        function loadUserData() {
            userData = UserData.load(currentUser);
        }
        
        // 保存用户数据
        function saveUserData() {
            userData.save();
        }
        
        // 设置事件监听器
        function setupEventListeners() {
            // 用户切换
            userButtons.mumu.addEventListener('click', () => switchUser('莯莯'));
            userButtons.ranran.addEventListener('click', () => switchUser('然然'));
            
            // 导航切换
            navItems.forEach(item => {
                item.addEventListener('click', () => {
                    const section = item.getAttribute('data-section');
                    switchSection(section);
                });
            });
            
            // 管理员控制
            document.getElementById('add-coins').addEventListener('click', () => showPasswordModal('addCoins'));
            document.getElementById('remove-coins').addEventListener('click', () => showPasswordModal('removeCoins'));
            document.getElementById('add-points').addEventListener('click', () => showPasswordModal('addPoints'));
            document.getElementById('remove-points').addEventListener('click', () => showPasswordModal('removePoints'));
            
            // 密码验证
            document.getElementById('confirm-password').addEventListener('click', confirmPassword);
            document.getElementById('cancel-password').addEventListener('click', hidePasswordModal);
            
            // 英语游戏控制
            document.getElementById('new-english-game').addEventListener('click', initEnglishGame);
            document.getElementById('english-hint').addEventListener('click', showEnglishHint);
            
            // 数学游戏控制
            document.getElementById('new-math-game').addEventListener('click', initMathGame);
            document.getElementById('math-hint').addEventListener('click', showMathHint);
            
            // 商店购买
            document.querySelectorAll('.buy-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    if (this.getAttribute('data-exchange')) {
                        exchangeCoins(parseInt(this.getAttribute('data-exchange')));
                    } else {
                        buyItem(this.getAttribute('data-item'));
                    }
                });
            });
            
            // 结果模态框
            document.getElementById('next-question').addEventListener('click', () => {
                document.getElementById('result-modal').style.display = 'none';
                initMathGame();
            });
            
            document.getElementById('close-result').addEventListener('click', () => {
                document.getElementById('result-modal').style.display = 'none';
            });
        }
        
        // 切换用户
        function switchUser(user) {
            // 保存当前用户数据
            saveUserData();
            
            // 切换用户
            currentUser = user;
            loadUserData();
            
            // 更新UI
            updateUI();
            
            // 更新用户按钮状态
            userButtons.mumu.classList.toggle('active', user === '莯莯');
            userButtons.ranran.classList.toggle('active', user === '然然');
        }
        
        // 切换导航部分
        function switchSection(section) {
            // 更新导航项状态
            navItems.forEach(item => {
                item.classList.toggle('active', item.getAttribute('data-section') === section);
            });
            
            // 更新部分可见性
            sections.forEach(sec => {
                sec.classList.toggle('active', sec.id === section);
            });
        }
        
        // 更新UI
        function updateUI() {
            // 更新总览
            document.getElementById('total-coins').textContent = userData.totalCoins;
            document.getElementById('total-points').textContent = userData.totalPoints;
            document.getElementById('english-coins').textContent = userData.english.coins;
            document.getElementById('english-level').textContent = userData.english.level;
            document.getElementById('english-progress').style.width = `${(userData.english.exp / userData.english.expNeeded) * 100}%`;
            document.getElementById('english-progress-text').textContent = `${userData.english.exp}/${userData.english.expNeeded}`;
            
            document.getElementById('math-coins').textContent = userData.math.coins;
            document.getElementById('math-level').textContent = userData.math.level;
            document.getElementById('math-progress').style.width = `${(userData.math.exp / userData.math.expNeeded) * 100}%`;
            document.getElementById('math-progress-text').textContent = `${userData.math.exp}/${userData.math.expNeeded}`;
            
            // 更新英语游戏区域
            document.getElementById('english-game-coins').textContent = userData.english.coins;
            document.getElementById('english-game-level').textContent = userData.english.level;
            document.getElementById('english-game-progress').style.width = `${(userData.english.exp / userData.english.expNeeded) * 100}%`;
            document.getElementById('english-game-progress-text').textContent = `${userData.english.exp}/${userData.english.expNeeded}`;
            
            // 更新数学游戏区域
            document.getElementById('math-game-coins').textContent = userData.math.coins;
            document.getElementById('math-game-level').textContent = userData.math.level;
            document.getElementById('math-game-progress').style.width = `${(userData.math.exp / userData.math.expNeeded) * 100}%`;
            document.getElementById('math-game-progress-text').textContent = `${userData.math.exp}/${userData.math.expNeeded}`;
            
            // 更新成就
            updateAchievements();
        }
        
        // 初始化英语游戏
        function initEnglishGame() {
            const road = document.getElementById('english-road');
            road.innerHTML = '';
            
            // 创建道路
            const roadPath = document.createElement('div');
            roadPath.className = 'road-path';
            road.appendChild(roadPath);
            
            // 创建10个关卡
            currentEnglishGame = {
                checkpoints: [],
                currentCheckpoint: 0,
                perfect: true,
                wrongCount: 0
            };
            
            for (let i = 0; i < 10; i++) {
                const checkpoint = document.createElement('div');
                checkpoint.className = 'checkpoint';
                checkpoint.textContent = i + 1;
                checkpoint.style.left = `${(i + 1) * 10}%`;
                
                // 为每个关卡随机选择一个单词
                const wordIndex = Math.floor(Math.random() * wordLibrary.length);
                const wordData = wordLibrary[wordIndex];
                
                // 随机决定缺失的字母数量和位置
                const missingLength = Math.floor(Math.random() * 3) + 1; // 1-3个字母
                const missingStart = Math.floor(Math.random() * (wordData.word.length - missingLength + 1));
                
                // 创建不完整的单词
                let incompleteWord = wordData.word.substring(0, missingStart);
                for (let j = 0; j < missingLength; j++) {
                    incompleteWord += '_';
                }
                incompleteWord += wordData.word.substring(missingStart + missingLength);
                
                // 存储关卡数据
                currentEnglishGame.checkpoints.push({
                    word: wordData.word,
                    incompleteWord: incompleteWord,
                    translation: wordData.translation,
                    pronunciation: wordData.pronunciation,
                    missingStart: missingStart,
                    missingLength: missingLength,
                    correctAnswer: wordData.word.substring(missingStart, missingStart + missingLength)
                });
                
                // 添加点击事件
                checkpoint.addEventListener('click', () => showEnglishQuestion(i));
                
                road.appendChild(checkpoint);
            }
        }
        
        // 显示英语问题
        function showEnglishQuestion(checkpointIndex) {
            const checkpoint = currentEnglishGame.checkpoints[checkpointIndex];
            const modal = document.getElementById('english-modal');
            const title = document.getElementById('english-modal-title');
            const question = document.getElementById('english-question');
            const options = document.getElementById('english-options');
            
            title.textContent = `关卡 ${checkpointIndex + 1}`;
            question.textContent = `单词: ${checkpoint.incompleteWord} (${checkpoint.translation})`;
            
            // 生成选项
            options.innerHTML = '';
            
            // 正确选项
            const correctOption = document.createElement('button');
            correctOption.className = 'option-btn correct';
            correctOption.textContent = checkpoint.correctAnswer;
            correctOption.addEventListener('click', () => handleEnglishAnswer(true, checkpointIndex));
            
            // 错误选项
            const wrongOption1 = document.createElement('button');
            wrongOption1.className = 'option-btn incorrect';
            wrongOption1.textContent = generateWrongAnswer(checkpoint.correctAnswer);
            wrongOption1.addEventListener('click', () => handleEnglishAnswer(false, checkpointIndex));
            
            const wrongOption2 = document.createElement('button');
            wrongOption2.className = 'option-btn incorrect';
            wrongOption2.textContent = generateWrongAnswer(checkpoint.correctAnswer);
            wrongOption2.addEventListener('click', () => handleEnglishAnswer(false, checkpointIndex));
            
            // 随机排列选项
            const optionArray = [correctOption, wrongOption1, wrongOption2];
            shuffleArray(optionArray);
            
            optionArray.forEach(option => options.appendChild(option));
            
            modal.style.display = 'flex';
        }
        
        // 处理英语答案
        function handleEnglishAnswer(isCorrect, checkpointIndex) {
            document.getElementById('english-modal').style.display = 'none';
            
            if (isCorrect) {
                // 奖励金币和经验值
                userData.english.coins += 1;
                userData.totalCoins += 1;
                addEnglishExp(10);
                
                // 更新当前关卡
                currentEnglishGame.currentCheckpoint = checkpointIndex + 1;
                
                // 显示成功消息
                showResult('太厉害了！', `你获得了1个金币和10点经验值！`);
                
                // 检查是否完成整条道路
                if (currentEnglishGame.currentCheckpoint >= 10) {
                    userData.english.completedRoads++;
                    
                    // 检查完美通关成就
                    if (currentEnglishGame.perfect) {
                        unlockAchievement('wordMaster');
                    }
                    
                    // 检查道路碾压者成就
                    if (userData.english.completedRoads >= 50) {
                        unlockAchievement('roadCrusher');
                    }
                }
            } else {
                // 错误答案
                currentEnglishGame.perfect = false;
                currentEnglishGame.wrongCount++;
                
                // 检查"我没好好学"成就
                if (currentEnglishGame.wrongCount >= 5) {
                    unlockAchievement('poorLearning');
                }
                
                showResult('再试一次', `这个单词的正确拼写是: ${currentEnglishGame.checkpoints[checkpointIndex].word}`);
            }
            
            saveUserData();
            updateUI();
        }
        
        // 显示英语提示
        function showEnglishHint() {
            if (userData.english.coins < 2) {
                showResult('金币不足', '你的金币不足以使用提示功能！');
                return;
            }
            
            const currentCheckpoint = currentEnglishGame.currentCheckpoint;
            if (currentCheckpoint >= 10) {
                showResult('提示', '你已经完成了所有关卡！');
                return;
            }
            
            const checkpoint = currentEnglishGame.checkpoints[currentCheckpoint];
            userData.english.coins -= 2;
            userData.totalCoins -= 2;
            
            showResult('提示', `单词: ${checkpoint.word} ${checkpoint.pronunciation} (${checkpoint.translation})`);
            
            saveUserData();
            updateUI();
        }
        
        // 初始化数学游戏
        function initMathGame() {
            const gameArea = document.getElementById('math-game-area');
            gameArea.innerHTML = '';
            
            const grade = document.getElementById('grade-select').value;
            const questions = mathLibrary[grade];
            const randomIndex = Math.floor(Math.random() * questions.length);
            const questionData = questions[randomIndex];
            
            currentMathGame = {
                grade: grade,
                question: questionData,
                usedHint: false
            };
            
            // 显示题目
            const questionElement = document.createElement('p');
            questionElement.textContent = questionData.question;
            questionElement.style.marginBottom = '20px';
            gameArea.appendChild(questionElement);
            
            // 显示选项
            const optionsContainer = document.createElement('div');
            questionData.options.forEach((option, index) => {
                const optionBtn = document.createElement('button');
                optionBtn.className = 'option-btn';
                optionBtn.textContent = option;
                optionBtn.style.display = 'block';
                optionBtn.style.margin = '10px 0';
                optionBtn.addEventListener('click', () => handleMathAnswer(index === questionData.answer));
                optionsContainer.appendChild(optionBtn);
            });
            
            gameArea.appendChild(optionsContainer);
        }
        
        // 处理数学答案
        function handleMathAnswer(isCorrect) {
            if (isCorrect) {
                // 根据年级计算奖励
                let coins = 0;
                let exp = 0;
                
                switch (currentMathGame.grade) {
                    case '二年级':
                        coins = 2;
                        exp = 20;
                        break;
                    case '三年级':
                        coins = 3;
                        exp = 30;
                        break;
                    case '四年级':
                        coins = 4;
                        exp = 40;
                        break;
                }
                
                // 应用奖励
                userData.math.coins += coins;
                userData.totalCoins += coins;
                addMathExp(exp);
                
                // 更新完成题目数量
                userData.math.completedQuestions++;
                
                // 检查数学成就
                checkMathAchievements();
                
                // 显示成功消息
                const message = `你获得了${coins}个金币和${exp}点经验值！`;
                showResult('太厉害了！', message, true);
            } else {
                showResult('再试一次', '这个答案不正确，请再思考一下！');
            }
            
            saveUserData();
            updateUI();
        }
        
        // 显示数学提示
        function showMathHint() {
            if (userData.math.coins < 4) {
                showResult('金币不足', '你的金币不足以使用提示功能！');
                return;
            }
            
            if (!currentMathGame) {
                showResult('提示', '请先开始一道题目！');
                return;
            }
            
            userData.math.coins -= 4;
            userData.totalCoins -= 4;
            currentMathGame.usedHint = true;
            
            const correctAnswer = currentMathGame.question.options[currentMathGame.question.answer];
            showResult('提示', `正确答案是: ${correctAnswer}`);
            
            saveUserData();
            updateUI();
        }
        
        // 显示结果
        function showResult(title, message, showNextButton = false) {
            document.getElementById('result-title').textContent = title;
            document.getElementById('result-message').textContent = message;
            document.getElementById('next-question').style.display = showNextButton ? 'block' : 'none';
            document.getElementById('result-modal').style.display = 'flex';
        }
        
        // 添加英语经验值
        function addEnglishExp(exp) {
            userData.english.exp += exp;
            
            // 检查升级
            while (userData.english.exp >= userData.english.expNeeded) {
                userData.english.exp -= userData.english.expNeeded;
                userData.english.level++;
                
                // 更新下一级所需经验值
                if (userData.english.level < 20) {
                    userData.english.expNeeded *= 2;
                } else {
                    userData.english.expNeeded = 0; // 满级
                }
                
                // 检查等级成就
                if (userData.english.level === 10) {
                    unlockAchievement('englishLevel10');
                } else if (userData.english.level === 20) {
                    unlockAchievement('englishLevel20');
                }
            }
        }
        
        // 添加数学经验值
        function addMathExp(exp) {
            userData.math.exp += exp;
            
            // 检查升级
            while (userData.math.exp >= userData.math.expNeeded) {
                userData.math.exp -= userData.math.expNeeded;
                userData.math.level++;
                
                // 更新下一级所需经验值
                if (userData.math.level < 20) {
                    userData.math.expNeeded *= 2;
                } else {
                    userData.math.expNeeded = 0; // 满级
                }
                
                // 检查等级成就
                if (userData.math.level === 10) {
                    unlockAchievement('mathPrince');
                } else if (userData.math.level === 20) {
                    unlockAchievement('mathMaster');
                }
            }
        }
        
        // 检查数学成就
        function checkMathAchievements() {
            const completed = userData.math.completedQuestions;
            
            if (completed >= 10 && !userData.achievements.mathBeginner) {
                unlockAchievement('mathBeginner');
            }
            if (completed >= 30 && !userData.achievements.mathPromising) {
                unlockAchievement('mathPromising');
            }
            if (completed >= 50 && !userData.achievements.mathEmerging) {
                unlockAchievement('mathEmerging');
            }
            if (completed >= 100 && !userData.achievements.mathOutstanding) {
                unlockAchievement('mathOutstanding');
            }
        }
        
        // 解锁成就
        function unlockAchievement(achievementId) {
            if (userData.achievements[achievementId]) return;
            
            userData.achievements[achievementId] = true;
            const achievement = achievementsList.find(a => a.id === achievementId);
            
            // 应用奖励
            if (achievement.reward.includes('金币')) {
                const coinsMatch = achievement.reward.match(/金币(\d+)/);
                if (coinsMatch) {
                    const coins = parseInt(coinsMatch[1]);
                    
                    if (achievement.type === 'english' || achievementId === 'poorLearning') {
                        if (achievementId === 'poorLearning') {
                            userData.english.coins = Math.max(0, userData.english.coins - coins);
                            userData.totalCoins = Math.max(0, userData.totalCoins - coins);
                        } else {
                            userData.english.coins += coins;
                            userData.totalCoins += coins;
                        }
                    } else if (achievement.type === 'math') {
                        userData.math.coins += coins;
                        userData.totalCoins += coins;
                    } else if (achievement.type === 'both') {
                        // 财务自由者成就，金币加到总金币中
                        userData.totalCoins += coins;
                    }
                }
            }
            
            if (achievement.reward.includes('经验') && achievementId !== 'poorLearning') {
                const expMatch = achievement.reward.match(/经验(\d+)/);
                if (expMatch) {
                    const exp = parseInt(expMatch[1]);
                    
                    if (achievement.type === 'english') {
                        addEnglishExp(exp);
                    } else if (achievement.type === 'math') {
                        addMathExp(exp);
                    }
                }
            }
            
            // 显示成就解锁消息
            showResult('成就解锁！', `你解锁了成就: ${achievement.title}！\n奖励: ${achievement.reward}`);
            
            saveUserData();
            updateUI();
        }
        
        // 更新成就显示
        function updateAchievements() {
            const achievementList = document.getElementById('achievement-list');
            achievementList.innerHTML = '';
            
            achievementsList.forEach(achievement => {
                const isUnlocked = userData.achievements[achievement.id];
                
                const item = document.createElement('div');
                item.className = `achievement-item ${isUnlocked ? '' : 'achievement-locked'}`;
                
                item.innerHTML = `
                    <div class="achievement-icon">${isUnlocked ? '🏆' : '🔒'}</div>
                    <div class="achievement-title">${achievement.title}</div>
                    <div class="achievement-desc">${achievement.description}</div>
                    <div class="achievement-reward">奖励: ${achievement.reward}</div>
                `;
                
                achievementList.appendChild(item);
            });
        }
        
        // 金币兑换积分
        function exchangeCoins(amount) {
            if (userData.totalCoins < amount) {
                showResult('金币不足', `你的金币不足以进行此兑换！`);
                return;
            }
            
            let points = 0;
            if (amount === 100) {
                points = 1;
            } else if (amount === 1000) {
                points = 12;
            } else if (amount === 10000) {
                points = 150;
            }
            
            userData.totalCoins -= amount;
            userData.totalPoints += points;
            
            showResult('兑换成功', `你使用${amount}金币兑换了${points}积分！`);
            
            saveUserData();
            updateUI();
        }
        
        // 购买物品
        function buyItem(item) {
            let cost = 0;
            let message = '';
            
            if (item === 'meal') {
                cost = 5000;
                message = '你购买了自选大餐！享受美味的火锅或烧烤吧！';
            } else if (item === 'leisure') {
                cost = 10000;
                message = '你购买了娱乐休闲！好好放松一下吧！';
            }
            
            if (userData.totalCoins < cost) {
                showResult('金币不足', `你的金币不足以购买此物品！`);
                return;
            }
            
            userData.totalCoins -= cost;
            showResult('购买成功', message);
            
            saveUserData();
            updateUI();
        }
        
        // 显示密码模态框
        function showPasswordModal(action) {
            pendingAdminAction = action;
            document.getElementById('password-modal').style.display = 'flex';
            document.getElementById('admin-password').value = '';
        }
        
        // 隐藏密码模态框
        function hidePasswordModal() {
            document.getElementById('password-modal').style.display = 'none';
            pendingAdminAction = null;
        }
        
        // 确认密码
        function confirmPassword() {
            const password = document.getElementById('admin-password').value;
            if (password === '952488') {
                executeAdminAction();
                hidePasswordModal();
            } else {
                showResult('密码错误', '管理员密码不正确！');
            }
        }
        
        // 执行管理员操作
        function executeAdminAction() {
            const coinChange = parseInt(document.getElementById('coin-change').value) || 0;
            const pointChange = parseInt(document.getElementById('point-change').value) || 0;
            
            switch (pendingAdminAction) {
                case 'addCoins':
                    userData.totalCoins += coinChange;
                    break;
                case 'removeCoins':
                    userData.totalCoins = Math.max(0, userData.totalCoins - coinChange);
                    break;
                case 'addPoints':
                    userData.totalPoints += pointChange;
                    break;
                case 'removePoints':
                    userData.totalPoints = Math.max(0, userData.totalPoints - pointChange);
                    break;
            }
            
            showResult('操作成功', `管理员操作已执行！`);
            
            saveUserData();
            updateUI();
        }
        
        // 辅助函数：生成错误答案
        function generateWrongAnswer(correctAnswer) {
            const letters = 'abcdefghijklmnopqrstuvwxyz';
            let wrongAnswer = '';
            
            for (let i = 0; i < correctAnswer.length; i++) {
                let randomChar;
                do {
                    randomChar = letters[Math.floor(Math.random() * letters.length)];
                } while (randomChar === correctAnswer[i]);
                
                wrongAnswer += randomChar;
            }
            
            return wrongAnswer;
        }
        
        // 辅助函数：打乱数组
        function shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }
        
        // 初始化应用
        window.addEventListener('DOMContentLoaded', initApp);
    </script>
</body>
</html>